<template>
	<div class="table">
		<div class="table-header">
			<h2 class="title">{{ title }}</h2>
			<slot name="headerHandler"></slot>
		</div>

		<el-table v-bind="childrenProps" ref="tableRef" :data="listData" stripe border style="width: 100%" show-overflow-tooltip lazy>
			<el-table-column v-if="isShowSelection" type="selection" width="50" align="center" />
			<el-table-column v-if="isShowIndex" type="index" label="序号" width="60" align="center" :index="handleIndex" />

			<template v-for="item in tableData" :key="item.label">
				<el-table-column v-bind="item" align="center">
					<template #default="scope">
						<slot :name="item.slotName" :row="scope.row">
							<div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
								{{ scope.row[item.prop] }}
							</div>
						</slot>
					</template>
				</el-table-column>
			</template>
		</el-table>

		<div v-if="totalCount > offset" class="footer">
			<slot name="footer">
				<el-pagination
					:current-page="currPage"
					:page-size="offset"
					:page-sizes="[10, 20, 30]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</slot>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { ElTable } from "element-plus"

const props = defineProps({
	title: {
		type: String,
		default: ""
	},
	listData: {
		type: Array,
		default: () => []
	},
	tableData: {
		type: Object,
		default: () => {}
	},
	isShowSelection: {
		type: Boolean,
		default: true
	},
	isShowIndex: {
		type: Boolean,
		default: true
	},
	currPage: {
		type: Number,
		default: 1
	},
	offset: {
		type: Number,
		default: 10
	},
	totalCount: {
		type: Number,
		default: 1
	},
	childrenProps: {
		type: Object,
		default: () => {}
	},
	showFooter: {
		type: Boolean,
		default: true
	}
})
const tableRef = ref<InstanceType<typeof ElTable>>()

const emit = defineEmits(["updateSize", "updateCurrPage"])
const handleSizeChange = (value: number) => {
	emit("updateSize", value)
}
const handleCurrentChange = (value: number) => {
	emit("updateCurrPage", value)
}
const handleIndex = (index: number) => {
	return (props.currPage - 1) * props.offset + index + 1
}
</script>

<style lang="less" scoped>
.table {
	.table-header {
		display: flex;
		justify-content: space-between;
		margin: 20px 0;
		font-size: 16px;
	}

	.footer {
		display: flex;
		justify-content: center;
		margin: 25px 10px;
	}
}

:deep(.el-table__body-wrapper .el-table-column--selection > .cell) {
	justify-content: center;
}
</style>
